@extends('home.frame')

@section('content')
<link href="/ho/css/stepstyle.css" rel="stylesheet" type="text/css">
<link href="/ho/css/personal.css" rel="stylesheet" type="text/css">
<style>
	.am-form-label{
		width:70px;
	}
</style>

					<div class="am-cf am-padding">
						<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">绑定手机</strong> / <small>Bind&nbsp;Phone</small></div>
					</div>
					<hr/>
					<!--进度条-->
					<div class="m-progress">
						@if(is_object($errors) && count($errors) > 0)
						  <div style="color:red;" class="one" onclick="$(this).css('display','none')">
						    验证失败：
						      <ul>
						          @foreach ($errors->all() as $error)
						              <li>{{ $error }}</li>
						          @endforeach
						      </ul>
						  </div>
						@elseif(is_string($errors))
						<div style="color:red;" class="one" onclick="this.style.display='none'">
						    验证失败：
						      <ul>
						        <li>{{$errors}}</li>
						      </ul>
						  </div>
						@endif
						@if(session('success'))
						<div style="color:green;" class="one" onclick="this.style.display='none'">
						      <ul>
						        <li>{{ session('success')}}</li>
						      </ul>
						  </div>
						@endif						
						
					</div>
					<form class="am-form am-form-horizontal" action="/home/userinfo/updatephone?uid={{session('user')->uid}}" method="post">
						{{ csrf_field()}}
						<div class="am-form-group">
							<label for="user-new-phone" class="am-form-label">验证手机</label>
							<div class="am-form-content">
								<input type="tel" id="phone" placeholder="绑定手机号" name="uphone">
								<div id="ajaxphone"></div>
							</div>
						</div>
						<div class="am-form-group code">
							<label for="user-new-code" class="am-form-label">验证码</label>
							<div class="am-form-content">
								<input type="tel" id="user-new-code" placeholder="短信验证码" name="phonecode">
							</div>
							<a class="btn" href="javascript:void(0);" onclick="sendMobileCode();" id="sendMobileCode">
								<button class="am-btn am-btn-danger" id="dyMobileButton" disabled onclick="return false" id="sendMobileCode">获取</button>
							</a>
						</div>
						<div class="info-btn">
							<button class="am-btn am-btn-danger">保存修改</button>
						</div>

					</form>

				<script type="text/javascript">
          function sendMobileCode(){
            $.get('/home/userinfo/phonecode',{'phone':$('#phone').val()},function(msg){
              if(msg == 2){
                alert('发送成功');
                countdown();
              }else if(msg==1){
                alert('请勿重复发送');
              }else{
                alert('发送失败');
              }
            });
          }

            function countdown(){
              document.getElementById("dyMobileButton").setAttribute("disabled",true);
              var i = 60;
              var intervalid;
              intervalid = setInterval(function(){
                  i--;
                  document.getElementById("dyMobileButton").innerHTML = i+'s';
                  if(i == 0){
                      clearInterval(intervalid);
                       document.getElementById("dyMobileButton").innerHTML = '获取';
                  }
             }, 1000);
           }

           $('#phone').blur(function(){
            var preg = /^1[34578]\d{9}$/ ;
            var str = $(this).val();
            if(preg.test(str)){
              $.get('/home/register/ajaxphone',{'uphone':$(this).val()},function (msg){
                if(msg==1){
                  $('#ajaxphone').text('手机号已存在').css('color','red');
                  $('#dyMobileButton').attr('disabled','disabled');
                }else{
                  $('#ajaxphone').text('手机号可用').css('color','green');
                  $('#dyMobileButton').removeAttr('disabled');
                }
              });
            }else{
              $('#ajaxphone').text('手机格式有误').css('color','red');
               $('#dyMobileButton').attr('disabled','disabled');
            }
          })

          </script>
@endsection